import React from 'react';
import { Button, Modal, Row, Col } from 'antd';
const confirm = Modal.confirm;
import { inject, observer } from 'mobx-react';
import { WeaTools, WeaErrorPage, WeaDialog, WeaSelect, WeaInput, WeaDatePicker, WeaBrowser } from 'ecCom';
import { WeaTableNew } from 'comsMobx';
import LanmuEditDialog from './dialog/LanmuEditDialog'
import ContributionSortDialog from './dialog/ContributionSortDialog'
import './style/journal.less';

const WeaTable = WeaTableNew.WeaTable;
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@inject("journalEditStore")
@observer
class JournalEdit extends React.Component {

    constructor(props) {
        super(props);
    }

    doInit(props) {
        const { journalEditStore, location: { query } } = props;
        const { initList } = journalEditStore;
        initList(query);
    }

    componentDidMount() {
        this.doInit(this.props);
    }

    componentWillReceiveProps(nextProps){
        const keyOld = this.props.location.key;
		const keyNew = nextProps.location.key;
		//点击菜单路由刷新组件
		if(keyOld !== keyNew) {
            this.doInit(nextProps);
        }
    }

    render() {
        const { journalEditStore } = this.props;
        const { tableStore, tableStore1, reserve, discard, getDiscardInfo, getReserveInfo, getDraftInfo, deleteReserve, recover, state, setVisible, visible1, setVisible1, options,
        setLmid, visible2, setVisible2, setTjlx, fromdate, setFromdate, todate, setTodate, title, setTitle, doSearch, createProof, createInfo, reLoad, leaderComment, adopt, buttonVisible1 } = journalEditStore;
        const tableHeight = (document.body.clientHeight/2)-41-40-44-20;
        const tableHeight1 = (document.body.clientHeight/2)-47-37-47-44;
        const disabled = !tableStore1.selectedRowKeysAllPages.length>0;
        return (
            <div className='journalEdit'>
                <div className='list1'>
                    <div className='button'>
                        <div className='common'>
                            <Button type="primary" onClick={() =>{createProof()}}>生成清样</Button>
                        </div>
                        <div className='common'>
                            <Button type="primary" disabled={disabled||buttonVisible1} onClick={() =>{
                                if(state=='3'){
                                    adopt();
                                }else{
                                    setVisible1(true);
                                }
                            }}>采用</Button>
                        </div>
                        {/* <div className='common'>
                            <Button type="primary" onClick={() =>{}}>删除采用</Button>
                        </div>
                        <div className='common'>
                            <Button type="primary" onClick={() =>{setVisible(true)}}>栏目跳转</Button>
                        </div> */}
                        <div className='common'>
                            <Button type="primary" onClick={() =>{setVisible(true)}}>栏目编辑</Button>
                        </div>
                        {/* <div className='common'>
                            <Button type="primary" onClick={() =>{}}>放入备用</Button>
                        </div> */}
                    </div>
                    <div className='table'>
                        <WeaTable 
                            comsWeaTableStore={tableStore}
                            childrenColumnName="subListspan"
                            hasOrder={true}
                            needScroll={true}
                            scroll={{y:tableHeight}}
                            tableWidth={this.tableWidth}
                            register_table={reLoad}
                            onOperatesClick={this.onOperatesClick}
                        />
                    </div>
                </div>
                <div className='list2'>
                    <div className='button'>
                        
                        {
                            (state!='1'&&state!='3')&&
                            <div className='common'>
                                <Button type="primary" disabled={disabled} onClick={() =>{reserve()}}>备用</Button>
                            </div>
                        }
                        {
                            state=='1'&&
                            <div className='common'>
                                <Button type="primary" disabled={disabled} onClick={() =>{deleteReserve()}}>删除备用</Button>
                            </div>
                        }
                        {
                            state=='0'&&
                            <div className='common'>
                                <Button type="primary" disabled={disabled} onClick={() =>{discard()}}>废弃</Button>
                            </div>
                        }
                        {
                            state=='2'&&
                            <div className='common'>
                                <Button type="primary" disabled={disabled} onClick={() =>{recover()}}>恢复</Button>
                            </div>
                        }
                        <div className='common'>
                            <Button type="primary" onClick={() =>{createInfo()}}>信息录入</Button>
                        </div>
                        {/* {
                            state=='0'&&(sffq=='0'?
                            <div className='common right'>
                                <Button type="primary" onClick={() =>{getDiscardInfo()}}>废弃信息(切换)</Button>
                            </div>:
                            <div className='common right'>
                                <Button type="primary" onClick={() =>{getEffectiveInfo()}}>有用信息(切换)</Button>
                            </div>)
                        } */}
                        <div className='common right'>
                            <Button type="primary" onClick={() =>{getDiscardInfo()}}>废弃信息</Button>
                        </div>
                        {/* <div className='common right'>
                            <Button type="primary" onClick={() =>{resume()}}>刊物信息</Button>
                        </div> */}
                        <div className='common right'>
                            <Button type="primary" onClick={() =>{getReserveInfo()}}>备用信息</Button>
                        </div>
                        {/* <div className='common right'>
                            <Button type="primary" onClick={() =>{resume()}}>反馈情况</Button>
                        </div>
                        <div className='common right'>
                            <Button type="primary" onClick={() =>{resume()}}>落实情况</Button>
                        </div> */}
                        <div className='common right'>
                            <Button type="primary" onClick={() =>{leaderComment()}}>领导批示</Button>
                        </div>
                        <div className='common right'>
                            <Button type="primary" onClick={() =>{getDraftInfo()}}>来稿信息</Button>
                        </div>                        

                    </div>
                    <div className='search'>
                        <div className='title inline'>
                            {state=='3'?'领导批示列表':state=='0'?'来稿信息列表':state=='1'?'备用信息列表':'废弃信息列表'}
                        </div>
                        {
                            state=='3'?
                            <div className='condition inline'>
                                <div className='condition3 inline'>
                                    <div className='title inline'>信息标题：</div>
                                    <WeaInput
                                        style={{ width: 200 }}
                                        value={title}
                                        onChange={v => {
                                            setTitle(v)
                                        }}
                                    />
                                </div>
                                <div className='button inline'>
                                    <Button type="primary" onClick={() =>{doSearch()}}>搜索</Button>
                                </div>
                            </div>
                            :
                            <div className='condition inline'>
                                <div className='condition1 inline'>
                                    <div className='title inline'>推荐类型：</div>
                                    <div className='inline'>
                                        <WeaBrowser
                                            type={161}
                                            dataParams={{type:'browser.KWkanwuleibiejichubiao'}}
                                            title={'刊物类型'}
                                            inputStyle={{ width: 200 }}
                                            onChange={(ids, names, datas) =>{setTjlx(ids)}}
                                        />
                                    </div>
                                </div>
                                <div className='condition2 inline'>
                                    <div className='title inline'>来稿日期：</div>
                                    <WeaDatePicker
                                        value={fromdate}
                                        viewAttr={2}
                                        onChange={v => setFromdate(v)}
                                    />
                                    &nbsp;~&nbsp;
                                    <WeaDatePicker
                                        value={todate}
                                        viewAttr={2}
                                        onChange={v => setTodate(v)}
                                    />
                                </div>
                                <div className='condition3 inline'>
                                    <div className='title inline'>标题：</div>
                                    <WeaInput
                                        style={{ width: 200 }}
                                        value={title}
                                        onChange={v => {
                                            setTitle(v)
                                        }}
                                    />
                                </div>
                                <div className='button inline'>
                                    <Button type="primary" onClick={() =>{doSearch()}}>搜索</Button>
                                </div>
                            </div>
                        }
                    </div>
                    <div className='table'>
                        <WeaTable 
                            comsWeaTableStore={tableStore1}
                            hasOrder={true}
                            needScroll={true}
                            scroll={{y:tableHeight1}}
                            tableWidth={this.tableWidth}
                            register_table={reLoad}
                            // onOperatesClick={this.onOperatesClick}
                        />
                    </div>
                    <LanmuEditDialog store={journalEditStore}></LanmuEditDialog>
                    <ContributionSortDialog store={journalEditStore}></ContributionSortDialog>
                    <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@sxyh38`}
                        title={'选择刊物栏目'}
                        visible={visible1}
                        buttons={this.getButtons()}
                        icon="icon-coms-ModelingEngine"
                        iconBgcolor="#217346"
                        onCancel={()=>{setVisible1(false)}}
                        style={{width:'400px', height:'50px'}}
                    >
                        <Row style={{fontSize: '16px',margin: '20px'}}>
                            <Col span={8}>刊物栏目：</Col>
                            <Col span={16}>
                                <WeaSelect
                                    key={options}
                                    hasBorder
                                    options={options}
                                    viewAttr={2}
                                    style={{width:'200px'}}
                                    onChange={v => {
                                        setLmid(v);
                                    }}
                                />
                            </Col>
                        </Row>
                    </WeaDialog>
                    <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@sxyh38`}
                        title={'栏目跳转'}
                        visible={visible2}
                        buttons={this.getButtons1()}
                        icon="icon-coms-ModelingEngine"
                        iconBgcolor="#217346"
                        onCancel={()=>{setVisible2(false)}}
                        style={{width:'400px', height:'50px'}}
                    >
                        <Row style={{fontSize: '16px',margin: '20px'}}>
                            <Col span={8}>刊物栏目：</Col>
                            <Col span={16}>
                                <WeaSelect
                                    key={options}
                                    hasBorder
                                    options={options}
                                    viewAttr={2}
                                    style={{width:'200px'}}
                                    onChange={v => {
                                        setLmid(v);
                                    }}
                                />
                            </Col>
                        </Row>
                    </WeaDialog>
                </div>
            </div>
        )
    }

    tableWidth = (columns) => {
        let width = 0;
        let cols = 0;
        columns.map(col => {
          if (col.display === 'true') {
            let oldwidth = col.oldWidth || '10%';
            let widthInt = parseFloat(oldwidth.replace('%', ''));
            if (widthInt <= 0) {
              widthInt = 10;
            }
            width += widthInt;
            cols++
          }
        })
        //超过10列，才出现滚动条，width>100才出现滚动条
        if(cols<=10){
            width = 100 ;
        }
        return `${width}%`;
    }

    getButtons(){
        const { journalEditStore } = this.props;
        const { setVisible1, adopt, buttonVisible } = journalEditStore;
        let btnArr = []; 
        btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@fjjgvg@close`}  type="primary" disabled={buttonVisible} onClick={()=>{
            adopt();
        }}>{getLabel(615,"提交")}</Button>)  
        btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@fjjgvg@close`}  type="primary" onClick={()=>setVisible1(false)}>{getLabel(309,"关闭")}</Button>)  
        return btnArr;
    }

    getButtons1(){
        const { journalEditStore } = this.props;
        const { setVisible2, changeLanmu } = journalEditStore;
        let btnArr = []; 
        btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@fjjgvg@close`}  type="primary" onClick={()=>{
            changeLanmu();
        }}>{getLabel(615,"提交")}</Button>)  
        btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@fjjgvg@close`}  type="primary" onClick={()=>setVisible2(false)}>{getLabel(309,"关闭")}</Button>)  
        return btnArr;
    }

    onOperatesClick=(record,index,operate,flag,argumentString)=>{
        const { journalEditStore } = this.props;
        const { deleteAdopt, reserve1, setVisible2, setGjid, setVisible3, setLmid } = journalEditStore;
		let _href = operate && operate.href ? operate.href : "";
		let fn = _href.replace("javascript:","");
        fn = fn.substring(0,fn.indexOf('('));
        let that = this;
		if(fn != ""){
			if("onDeleteAdopt"==fn){
				let params = {gjid:record.randomFieldId}
				confirm({
                    title: getLabel(15172,'系统提示'),
					content: '您确认要删除采用吗?',
					onOk() {
                        deleteAdopt(params);
					},
					onCancel() {},
				});
			}else if("onChangeLanmu"==fn){
                setGjid(record.randomFieldId);
                setVisible2(true);
			}else if("onReserve"==fn){
                let params = {gjid:record.randomFieldId}
				confirm({
                    title: getLabel(15172,'系统提示'),
					content: '您确认要放入备用吗?',
					onOk() {
                        reserve1(params);
					},
					onCancel() {},
				});
			}else if("onSort"==fn){
                setLmid(record.randomFieldId);
                setVisible3(true);
			}
		}
    }

}

export default WeaTools.tryCatch(React,
    props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@jkkcqy`} msg={props.error ? props.error : getLabel( 383324,'对不起，该页面异常，请联系管理员' )} />,
    { error: "" }
)(JournalEdit);